var P1 = function (game) {

  this.create = function () {
    ClosePage(game, '1_0', '1', '1_r', '1_w');


    function Page(game, cbg, mbg, rbg, wbg) {
      var tar = [];
      var bg = game.add.sprite(0, 0, mbg);
      bg.anchor.setTo(0, 0);

      bounds = new Phaser.Rectangle(240, 160, 1146, 450);

      var graphics = game.add.graphics(bounds.x, bounds.y);
      graphics.beginFill(0x000077);
      graphics.drawRect(0, 0, bounds.width, bounds.height);
      graphics.visible = false;

      var group = game.add.group();
      var bimgs = ['1_10','1_11', '1_12','1_13'];

      var posXO = [840,1060,400, 620];
      var posX =  [400, 620,840,1060,];
      var posY = 0;
      var tween;

      for (var i = 0; i < 4; i++) {
        var button = game.add.button(posXO[i], 270, bimgs[i], '', this, 2, 1, 0);
        posY = 270;
        button.data = i;
        button.name = bimgs[i];
        button.input.enableDrag(false, true);
        button.input.boundsRect = bounds;

        group.addChildAt(button,i);
        button.events.onDragStop.add(fixLocation);
      }

      function fixLocation() {
        var xary = [];
        group.children.forEach(function (item) {
          xary.push(item.x);
        });
        tar = getSortList(xary);
        group.children.forEach(function (item, i) {
          tween = game.add.tween(item).to({x: posX[tar[i]], y: posY}, 500, Phaser.Easing.Linear.None, true);
        });
      }

      var getSortList = function (ary) {
        var target = [],
          newli = [];
        ary.forEach(function (v, i) {
          newli[i] = v;
        });
        newli = newli.sort(function (a, b) {
          return a - b;
        });
        ary.forEach(function (v, i) {
          newli.forEach(function (val, k) {
            if (v === val) {
              target[i] = k;
            }
          });
        });
        return target;
      };


      game.add.button(1250, 630, imgs['submit'], onSubmit, this, 2, 1, 0);



      function onSubmit() {
        var flag=true;
        for(var i=0;i<4;i++){
          var obj=group.getByName(bimgs[i]);
          if(obj.x!=posX[i]){
            flag=false;
          }
        }
        if (flag) {
          RightPage(game, cbg, mbg, rbg, wbg);
        } else {
          WrongPage(game, cbg, mbg, rbg, wbg);
        }
        group.destroy();
      }

    }

    function ClosePage(game, cbg, mbg, rbg, wbg) {
      var container = game.add.sprite(0, 0, '');
      var close = game.add.button(0, 0, cbg, onClose, this, 2, 1, 0);
      container.addChild(close);

      function onClose() {
        container.destroy();
        Page(game, cbg, mbg, rbg, wbg);
      }
    }

    function WrongPage(game, cbg, mbg, rbg, wbg) {
      var container = game.add.sprite(0, 0, '');

      var bg = game.add.image(0, 0, wbg);
      container.addChild(bg);

      var next = game.add.button(1250, 630, imgs['retry'], onClick, this, 2, 1, 0);
      container.addChild(next);
      function onClick() {
        container.destroy();
        Page(game, cbg, mbg, rbg, wbg);
      }
    }

    function RightPage(game, cbg, mbg, rbg, wbg) {
      var container = game.add.sprite(0, 0, '');
      var bg = game.add.image(0, 0, rbg);
      container.addChild(bg);
      var next = game.add.button(1250, 630, imgs['next'], onClick, game, 2, 1, 0);
      container.addChild(next);

      function onClick() {
        game.goState('next');
      }
    }
  }

}




